{% extends "forms/field.html.twig" %}

{% macro options(field, pages, value, depth) %}

    {% if field.options and depth == 0 %}
        {% for key, value in field.options %}
            <option value="{{ key|e('html_attr') }}">{{ value|t }}</option>
        {% endfor %}
    {% endif %}

    {% if field.show_root and depth == 0 %}
        <option value="/">/ (Root)</option>
        {% set depth = depth +1 %}
    {% endif %}

    {% set indent = depth == 0 ? '' : repeat('-',depth) ~ ' ' %}

    {% for page in pages.children %}
        {% if page.routable() or field.show_all  %}
            <option {% if page.route == value or (field.multiple and page.route in value) %}selected="selected"{% endif %} value="{{ page.route }}">
                {{indent}} {{ page.menu }}
            </option>
        {% endif %}
        {% if page.children|length > 0 and (field.show_modular or not page.modular()) %}

            {{ _self.options(field, page,value, depth + 1) }}

        {% endif %}
    {% endfor %}
{% endmacro %}

{% block global_attributes %}
    data-grav-selectize="{{ (field.selectize is defined ? field.selectize : {})|json_encode|e('html_attr') }}"
    data-grav-field="select"
    data-grav-disabled="{{ originalValue is null ? 'true' : 'false' }}"
    data-grav-default="{{ field.default|json_encode|e('html_attr') }}"
{% endblock %}

{% block input %}
    <div class="form-select-wrapper {{ field.size }}">
        <select class="{{ field.classes }}" name="{{ (scope ~ field.name)|fieldName ~ (field.multiple ? '[]' : '') }}"
                {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
                {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
                {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
                {% if field.multiple in ['on', 'true', 1] %}multiple="multiple"{% endif %}
                {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
                >
            {{ _self.options(field,pages,value, 0) }}
        </select>
    </div>
{% endblock %}

